<div class="logic-flow-view">
  <div class="ui-nav-menu">
    <el-container>
      <el-header></el-header>
      <el-container>
        <el-aside width="250px">
          <NavMenu v-if="isOpenPlayDemo" :isOpenPlayDemo="isOpenPlayDemo" :treeData="playDemo_treeData" :lf="lf"
            @changePanel="$_changePanel" @changePlayDemoPanel="$_changePlayDemoPanel"> </NavMenu>
          <NavMenu v-else :isOpenPlayDemo="isOpenPlayDemo" :treeData="treeData" :lf="lf" @changePanel="$_changePanel">
          </NavMenu>
        </el-aside>
        <!-- <div v-if="show" class="shrink-icon shrink-show-icon" @click="show = false" :lf="lf"></div>
        <div v-else class="shrink-icon shrink-hide-icon" @click="show = true"></div>
        <el-collapse-transition>
          <el-aside class="plot-list-aside" v-if="!isOpenPlayDemo&&show" width="200px">
            <PlotList :selectIndex="selectIndex" :sceneList="sceneList" @selectScene="updateSelectIndex"
              @deleteScene="$_deleteScene" @addScene="$_addScene"> </PlotList>
          </el-aside>
        </el-collapse-transition> -->
        <el-container>
          <el-header>
            <div class="header-panel" v-if="!isOpenPlayDemo">
              <NodePanel v-if="lf &&changePanelIndex ===0" :lf="lf" :nodeList="nodeList" @dragNode="$_updateNavMenu">
              </NodePanel>
              <RoleHeader v-if="changePanelIndex ===1" @createRole="$_createRole"></RoleHeader>
              <LocationHeader v-if="changePanelIndex ===3" @createLocation="$_createLocation"></LocationHeader>
              <ControlPanel class="demo-control" v-if="lf" :lf="lf" :userData="userData" @saveUserData="$_saveUserData"
                @catData="$_catData" @playDemo="$_playDemo" @downloadData="$_downloadData" @uploadData="$_uploadData">
              </ControlPanel>
            </div>
          </el-header>
          <div class="ui-el-main">
            <!-- 画布 -->
            <div id="LF-view" ref="container"></div>
            <!-- 用户节点自定义操作面板 -->
            <AddPanel v-if="showAddPanel" class="add-panel" :lf="lf" :nodeData="addClickNode"
              @addNodeFinish="hideAddPanel"></AddPanel>
            <el-drawer :title=clickType v-model="dialogVisible" direction="rtl" size="500px"
              :before-close="closeDialog">
              <PropertyDialog v-if="dialogVisible" :allReward="allReward" :treeData="treeData" :nodeData="clickNode"
                :lf="lf" @setPropertiesFinish="closeDialog">
              </PropertyDialog>
            </el-drawer>
            <!-- 数据查看面板 -->
            <el-dialog title="数据" v-model="dataVisible" width="50%">
              <DataDialog :graphData="graphData"></DataDialog>
            </el-dialog>
          </div>
          <!-- 不同点击面板-->
          <PlayDemo v-if="isOpenPlayDemo" :lf="lf" :selectElement="selectElement" :treeElement="treeElement"
            @closeDemoPanel="$_closeDemoPanel"></PlayDemo>
          <RoleShow :allRole="allRole" v-if="changePanelIndex ===1" @deleteRole="$_deleteRole" @editRole="$_editRole">
          </RoleShow>
          <RoleDescribe :currentRole="currentRole" :changePanelIndex="changePanelIndex" @changePanel="$_changePanel"
            @saveRoleInfo="$_saveRoleInfo" v-if="changePanelIndex ===2"></RoleDescribe>
          <LocationShow :allLocation="allLocation" v-if="changePanelIndex ===3" @deleteLocation="$_deleteLocation"
            @editLocation="$_editLocation"></LocationShow>
          <LocationDescribe :currentLocation="currentLocation" :changePanelIndex="changePanelIndex"
             @saveLocationInfo="$_saveLocationInfo" v-if="changePanelIndex ===4">
          </LocationDescribe>
          <RewardShow @saveRewardInfo="$_saveRewardInfo" :allReward="allReward" :changePanelIndex="changePanelIndex"
            v-if="changePanelIndex ===5"></RewardShow>
          <ProjectDescribe  :changePanelIndex="changePanelIndex" v-if="changePanelIndex ===6" :allProject="allProject"
          @saveProjectInfo="$_saveProjectInfo"></ProjectDescribe>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <!-- 角色对话框 -->
  <RoleDialog v-model="role_visible" :roleBoxPos="roleBoxPos" :show-close="false" :treeData="treeData"
    :nodeData="clickNode" @sureRolePic="sureRolePic" @closeRolePanel="closeRolePanel"></RoleDialog>
  <ConvRoleDialog v-model="conv_role_visible" :roleBoxPos="roleBoxPos" :show-close="false" :treeData="treeData"
    :nodeData="clickNode" @sureConvRolePic="sureConvRolePic" @closeRolePanel="closeRolePanel"></ConvRoleDialog>
  <LocDialog v-model="loc_visible" :show-close="false" :treeData="treeData" :nodeData="clickNode"
    @sureLocPic="sureLocPic" @closeLocPanel="closeLocPanel"></LocDialog>
</div>